
{extend name="layout"}
{block name="title"}账单付款{/block}
{block name="body"}
<form class="layui-form-type layui-form mainForm" data-auto="true" data-callback="submitCallback">
<div class="view-content">
	<div class="view-box">
		<div class="view-title">
			<span>核对付款信息</span>
		</div>
		<div class="view-detail">
			<p>订单编号：<span class="is-bold is-black">{$info.code|default=''}</span> </p>
			<p>应付金额：<span class="is-bold is-black">{$info.receivable|default=''}</span> </p>
			<p>备注信息：<span class="is-bold is-black">{$info.desc|default=''}</span> </p>

		</div>
	</div>
	<div class="view-box pay-box" data-tab="gdg">
		<div class="view-title">
			<span>选择支付方式</span>
		</div>
		<div class="view-button">
			<button class="pay-button btn-gdg" data-method="gdg" type='button' >公对公转账</button>
			<button class="pay-button btn-alipay" data-method="alipay" type='button' >支付宝转账</button>
			<button class="pay-button btn-wechat" data-method="wechat" type='button' >微信支付</button>
		</div>
		<div class="view-detail methods-gdg">

			<p><span>公司名称：</span>   <span class="is-black">石家庄沃伦德人力资源服务有限公司</span> </p>
			<p><span>银行卡号：</span>  <span class="is-black">13001615408050517433</span> </p>
			<p><span>开户银行：</span>  <span class="is-black">中国建设银行股份有限公司石家庄铁道支行</span> </p>
			<p><span>银行行号：</span>  <span class="is-black">105121061084</span> </p>
			<p><span>付款金额：</span>  <span class="is-red">{$info.receivable|default=''}</span> </p>
			<p><span>付款备注：</span>  <span class="is-red">{$info.code|default=''}</span> </p>

		</div>
		<div class="view-detail methods-alipay">

			<p><span>支付宝账号：</span>   <span class="is-black">wolunde@126.com</span> <span class="is-copy" data-copy="wolunde@126.com">复制</span></p>
			<p><span>账号名称：</span>  <span class="is-black">石家庄沃伦德人力资源服务有限公司</span> </p>
			<p><span>付款金额：</span>  <span class="is-red">{$info.receivable|default=''}</span> </p>
			<p><span>付款备注：</span>  <span class="is-red">{$info.code|default=''}</span> </p>
		</div>
		{if $info.cost_type eq 1}
		<div class="view-detail methods-wechat">
			<p>付款金额： <span class="is-red">{$info.receivable_online|default=''}</span>（含通道费：<span class="is-red">{$info.passage_fee|default=''}</span>）</p>		</div>
		{else/}
		<div class="view-detail methods-wechat">
			<p>付款金额： <span class="is-red">{$info.receivable|default=''}</span></p>		</div>
		{/if}
	</div>


	<div class="view-box pay-box" data-tab="gdg" style="margin-bottom: 1.733rem">
		<div class="view-title">
			<span>注意事项</span>
		</div>
		<div class="view-detail methods-gdg">

			<p>1.  转账时务必保证转账金额与订单金额一致，请勿多转、少转；</p>
			<p>2.  汇款时将订单编号填写至汇款单“用途/备注/摘要”等栏；</p>
			<p>3.  转账完成后请点击下方的“我已转账”按钮，有助于提升对账进度；</p>
			<p>4.  若超出1个工作日仍未对账，可联系客服0311-85202890咨询反馈</p>

		</div>
		<div class="view-detail methods-alipay">

			<p>1.  转账时务必保证转账金额与订单金额一致，请勿多转、少转；</p>
			<p>2.  汇款时将订单编号填写至汇款单“用途/备注/摘要”等栏；</p>
			<p>3.  转账完成后请点击下方的“我已转账”按钮，有助于提升对账进度；</p>
			<p>4.  ，若超出1个工作日仍未对账可联系客服0311-85202890咨询反馈</p>

		</div>
		<div class="view-detail methods-wechat">
			{if $info.cost_type eq 1}
			<p>1.  使用微信支付时会收取一定的通道费用；</p>
			<p>2.  若支付遇到问题可联系客服0311-85202890咨询反馈。</p>
			{else/}
			<p>1.  若支付遇到问题可联系客服0311-85202890咨询反馈。</p>
			{/if}
		</div>

	</div>


</div>

<div class="pay-box submit-box" data-tab="gdg">
	<button class="btn-submit btn-submit-gdg btn-submit-alipay">我已转账</button>
	<button class="btn-submit-wechat" onclick="goWechatPay()">支付</button>
	<input type="hidden" name="id"  value="{$info.id|default=''}" />
</div>
</form>

{/block}

{block name="script"}
<script>
	$(function (){
		$(".view-button").on("click",'button',function (){
			$(".pay-box").attr("data-tab",$(this).attr("data-method"))
		})
	})
	function goWechatPay(){
		event.preventDefault()
		if(isWx()){
			//微信内支付
			$.ajax({
				type: "POST",
				url: '{:url("wechat_pay_jsapi")}',
				dataType: "json",
				data:{id:$("input[name='id']").val()},
				success: function (res) {
					if(res.code==1){
						var data = res.data

						if (typeof WeixinJSBridge == "undefined"){
							if( document.addEventListener ){
								document.addEventListener('WeixinJSBridgeReady', onBridgeReady(data), false);
							}else if (document.attachEvent){
								document.attachEvent('WeixinJSBridgeReady', onBridgeReady(data));
								document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(data));
							}
						}else{
							onBridgeReady(data);
						}
						console.log("weixin")
					}else{
						$.msg.error(res.info)
					}
				}
			})


		}else{
			//微信外支付
			$.ajax({
				type: "POST",
				url: '{:url("wechat_pay_h5")}',
				dataType: "json",
				data:{id:$("input[name='id']").val()},
				success: function (res) {
					console.log(res)
					if(res.code==1){
						window.location.href = res.data

					}else{
						$.msg.error(res.info)
					}
				}
			})
		}
	}
	function onBridgeReady(data){
		WeixinJSBridge.invoke(
			'getBrandWCPayRequest', {
				"appId":data.appId,     //公众号ID，由商户传入
				"timeStamp":data.timeStamp,         //时间戳，自1970年以来的秒数
				"nonceStr":data.nonceStr, //随机串
				"package": 'prepay_id=' + data.prepay_id,
				"signType":"MD5",         //微信签名方式：
				"paySign":data.paySign //微信签名
			},
			function(res){
				if(res.err_msg == "get_brand_wcpay_request:ok" ){
					// 使用以上方式判断前端返回,微信团队郑重提示：
					//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
					window.location.href="{:url('mobile/cadditionalbill/paymentSuccess')}"
				}
			});
	}

</script>
{/block}


{block name="style"}
<style>
	/*支付方式按钮*/
	.view-button{
		margin-top: 0.4rem;
	}
	.pay-button{
		display: inline-block;
		box-sizing: border-box;
		width: 2.4rem;
		height: 0.8rem;
		background: #F7F7FA;
		border: 1px solid #C2C2C2;
		border-radius: 30px;
		margin-right: 0.267rem;

		font-size: 0.32rem;
		color: #C2C2C2;
		/*line-height: 0.8rem;*/
	}
	.pay-box[data-tab='gdg'] .btn-gdg {

		background: #43C6D6;
		color:#FFFFFF ;
		border: none;

	}

	.pay-box[data-tab='alipay'] .btn-alipay {

		background: #43C6D6;
		color:#FFFFFF ;
		border: none;

	}
	.pay-box[data-tab='wechat'] .btn-wechat {

		background: #43C6D6;
		color:#FFFFFF ;
		border: none;

	}
	/*注意事项显隐*/
	.pay-box .view-detail{
		display: none;
	}
	.pay-box[data-tab='gdg'] .methods-gdg {

		display: block;

	}

	.pay-box[data-tab='alipay'] .methods-alipay {

		display: block;

	}
	.pay-box[data-tab='wechat'] .methods-wechat {

		display: block;

	}

	.is-red{
		color: #FF5656;
		font-weight: bold;

	}
	.is-black{
		color: #333333;

	}
	.is-bold{
		font-weight: bold;
		/*font-size: 16px;*/
	}
	/*转账按钮*/
	.submit-box{
		position: fixed;
		bottom: 0;
		width: 10rem;
		height: 1.467rem;
		background: #FFFFFF;
		box-shadow: 0rem -0.013rem 0.173rem 0rem rgba(162, 162, 162, 0.33);
	}
	.btn-submit,.btn-submit-wechat{
		width: 7.467rem;
		line-height: 1.147rem;
		background: #43C6D6;
		border-radius: 0.573rem;
		margin: 0.16rem auto;
		border: none;
		font-size: 0.4rem;
		color: #FFFFFF;
	}
	.pay-box .btn-submit{
		display: none;
	}
	.pay-box[data-tab='gdg'] .btn-submit-gdg {

		display: block;

	}

	.pay-box[data-tab='alipay'] .btn-submit-alipay {

		display: block;

	}
	.pay-box[data-tab='wechat'] .btn-submit-wechat {

		display: block;

	}
	.is-copy{
		display: inline-block;
		margin-left: 0.2rem;
		width: 0.8rem;
		line-height:0.427rem;
		background: #FF6D5A;
		border-radius: 0.2rem;
		text-align: center;
		font-size: 0.267rem;
		color: #FFFFFF;
	}
</style>

{/block}


